<template>
  <div class='container'>
    <el-card v-if="id">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{$route.query.name}}</el-breadcrumb-item>
        <el-breadcrumb-item>标签管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <el-card>
      <el-row>
        <el-col :span='18'>
          <el-form inline size="small" :model="form">
            <el-form-item label="标签名称">
              <el-input v-model="form.tagName" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="form.state" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="clear">清除</el-button>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span='6' >
          <el-button style="float: right;" type="success" icon="el-icon-edit" size="small" @click="dialogVisible = true">新增学科</el-button>
          <el-button type="text" style="float: right;margin-right:5px;" @click="$router.back()" v-if="id">
            <i class="el-icon-back"></i>
            <span>返回学科</span>
          </el-button>
        </el-col>
      </el-row>
      <el-alert
        :title="`数据一共 ${total} 条`"
        type="info"
        :closable="false"
        show-icon
        style="margin-bottom: 15px">
      </el-alert>
      <el-table :data="TagsList">
        <el-table-column label="序号" type="index" :index="indexMethod"/>
        <el-table-column label="所属学科" prop="subjectName" />
        <el-table-column label="标签名称" prop="tagName" />
        <el-table-column label="创建者" prop="username" />
        <el-table-column label="创建日期">
          <template v-slot="{ row }">
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template v-slot="{ row }">
            {{ row.state === 1 ? '已启用' : '已禁用' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="240px">
          <template v-slot="{ row }">
            <el-button type="text" @click="toggle(row)">
              {{ row.state === 1 ? '禁用' : '启用' }}
            </el-button>
            <el-button type="text" :disabled="row.state === 1" @click="editShow(row)">修改</el-button>
            <el-button type="text" :disabled="row.state === 1" @click="del(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        background
        layout="prev, pager, next, sizes, jumper"
        :current-page="form.page"
        :total="total"
        :page-sizes="[10,15,20,25]"
        @current-change="currentChange"
        @size-change='sizeChange'>
      </el-pagination>
    </el-card>
    <TagsAdd ref="TagsAdd" :dialogVisible.sync="dialogVisible" @page="form.page = 1" @getTagsList='getTagsList' :id="id"></TagsAdd>
  </div>
</template>

<script>
import TagsAdd from '../components/tags-add'
import { list as getTagsList, changeState, remove } from '@/api/hmmm/tags'
export default {
  name: 'Tags',
  components: {
    TagsAdd
  },
  data () {
    return {
      form: {
        tagName: null,
        pagesize: 10,
        page: 1,
        state: null,
        subjectID: null
      },
      TagsList: [],
      total: 0,
      dialogVisible: false,
      value: true,
      options: [{
        value: 1,
        label: '启用'
      }, {
        value: 0,
        label: '禁用'
      }]
    }
  },
  computed: {
    id () {
      return this.$route.query.id
    }
  },
  created () {
    this.create()
  },
  watch: {
    id () {
      this.create()
    }
  },
  methods: {
    indexMethod (index) {
      return index + (this.form.page - 1) * this.form.pagesize + 1
    },
    create () {
      if (this.id) {
        this.form.subjectID = this.id
        this.getTagsList()
      } else {
        this.form.subjectID = null
        this.getTagsList()
      }
    },
    async getTagsList () {
      const { data } = await getTagsList(this.form)
      console.log(data)
      this.TagsList = data.items
      this.total = data.counts
    },
    search () {
      this.form.page = 1
      this.getTagsList()
    },
    clear () {
      this.form.tagName = null
      this.form.state = null
    },
    currentChange (page) {
      this.form.page = page
      this.getTagsList()
    },
    sizeChange (pagesize) {
      this.form.page = 1
      this.form.pagesize = pagesize
      this.getTagsList()
    },
    async toggle (row) {
      row.state === 1 ? row.state = 0 : row.state = 1
      await changeState(row)
      this.$message.success('操作成功')
    },
    editShow (row) {
      this.dialogVisible = true
      this.$refs.TagsAdd.dialogForm = { ...row }
      this.$refs.TagsAdd.focus()
    },
    async del (row) {
      try {
        await this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
          type: 'warning'
        })
      } catch {
        return false
      }
      if (this.subjectsList.length === 1) {
        this.form.page--
      }
      await remove(row)
      this.$message.success('删除标签成功')
      this.getTagsList()
    }
  }
}
</script>

<style scoped lang='scss'>
.container{
  padding: 10px 15px;
  .pagination{
    float: right;
    margin: 15px 0;
  }
}
</style>
